<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
    <title>Modern an Admin Panel Category Flat Bootstarp Resposive Website Template | Forms :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="../css/style.css" rel='stylesheet' type='text/css'/>
    <link href="../css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../js/jquery.min.js"></script>
    <!---//webfonts--->
    <!-- Bootstrap Core JavaScript -->
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="top1 navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Modern</a>
        </div>
        <!-- /.navbar-header -->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
                        class="fa fa-comments-o"></i><span class="badge">4</span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header">
                        <strong>Messages</strong>
                        <div class="progress thin">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/1.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                            <span class="label label-info">NEW</span>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/2.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                            <span class="label label-info">NEW</span>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/3.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/4.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/5.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/pic1.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="dropdown-menu-footer text-center">
                        <a href="#">View all messages</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown"><img src="../images/1.png" alt=""/><span
                        class="badge">9</span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header text-center">
                        <strong>Account</strong>
                    </li>
                    <li class="m_2"><a href="#"><i class="fa fa-bell-o"></i> Updates <span
                            class="label label-info">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-envelope-o"></i> Messages <span
                            class="label label-success">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-tasks"></i> Tasks <span
                            class="label label-danger">42</span></a></li>
                    <li><a href="#"><i class="fa fa-comments"></i> Comments <span class="label label-warning">42</span></a>
                    </li>
                    <li class="dropdown-menu-header text-center">
                        <strong>Settings</strong>
                    </li>
                    <li class="m_2"><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-wrench"></i> Settings</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-usd"></i> Payments <span
                            class="label label-default">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-file"></i> Projects <span
                            class="label label-primary">42</span></a></li>
                    <li class="divider"></li>
                    <li class="m_2"><a href="#"><i class="fa fa-shield"></i> Lock Profile</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-lock"></i> Logout</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right">
            <input type="text" class="form-control" value="Search..." onFocus="this.value = '';"
                   onBlur="if (this.value == '') {this.value = 'Search...';}">
        </form>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw nav_icon"></i>Dashboard</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-laptop nav_icon"></i>Layouts<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="grids.html">Grid System</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-indent nav_icon"></i>Menu Levels<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="graphs.html">Graphs</a>
                            </li>
                            <li>
                                <a href="typography.html">Typography</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope nav_icon"></i>Mailbox<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="inbox.html">Inbox</a>
                            </li>
                            <li>
                                <a href="compose.html">Compose email</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="widgets.html"><i class="fa fa-flask nav_icon"></i>Widgets</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-check-square-o nav_icon"></i>Forms<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="forms.html">Basic Forms</a>
                            </li>
                            <li>
                                <a href="validation.html">Validation</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-table nav_icon"></i>Tables<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="basic_tables.html">Basic Tables</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sitemap fa-fw nav_icon"></i>Css<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="media.html">Media</a>
                            </li>
                            <li>
                                <a href="login.html">Login</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <div id="page-wrapper">
        <div class="graphs">
            <div class="xs">
                <h3>Forms</h3>
                <div class="tab-content">
                    <div class="tab-pane active" id="horizontal-form">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="focusedinput" class="col-sm-2 control-label">Focused Input</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control1" id="focusedinput"
                                           placeholder="Default Input">
                                </div>
                                <div class="col-sm-2">
                                    <p class="help-block">Your help text!</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="disabledinput" class="col-sm-2 control-label">Disabled Input</label>
                                <div class="col-sm-8">
                                    <input disabled="" type="text" class="form-control1" id="disabledinput"
                                           placeholder="Disabled Input">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control1" id="inputPassword"
                                           placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="checkbox" class="col-sm-2 control-label">Checkbox</label>
                                <div class="col-sm-8">
                                    <div class="checkbox-inline1"><label><input type="checkbox"> Unchecked</label></div>
                                    <div class="checkbox-inline1"><label><input type="checkbox" checked="">
                                        Checked</label></div>
                                    <div class="checkbox-inline1"><label><input type="checkbox" disabled=""> Disabled
                                        Unchecked</label></div>
                                    <div class="checkbox-inline1"><label><input type="checkbox" disabled="" checked="">
                                        Disabled Checked</label></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="checkbox" class="col-sm-2 control-label">Checkbox Inline</label>
                                <div class="col-sm-8">
                                    <div class="checkbox-inline"><label><input type="checkbox"> Unchecked</label></div>
                                    <div class="checkbox-inline"><label><input type="checkbox" checked="">
                                        Checked</label></div>
                                    <div class="checkbox-inline"><label><input type="checkbox" disabled=""> Disabled
                                        Unchecked</label></div>
                                    <div class="checkbox-inline"><label><input type="checkbox" disabled="" checked="">
                                        Disabled Checked</label></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="selector1" class="col-sm-2 control-label">Dropdown Select</label>
                                <div class="col-sm-8"><select name="selector1" id="selector1" class="form-control1">
                                    <option>Lorem ipsum dolor sit amet.</option>
                                    <option>Dolore, ab unde modi est!</option>
                                    <option>Illum, fuga minus sit eaque.</option>
                                    <option>Consequatur ducimus maiores voluptatum minima.</option>
                                </select></div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Multiple Select</label>
                                <div class="col-sm-8">
                                    <select multiple="" class="form-control1">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="txtarea1" class="col-sm-2 control-label">Textarea</label>
                                <div class="col-sm-8"><textarea name="txtarea1" id="txtarea1" cols="50" rows="4"
                                                                class="form-control1"></textarea></div>
                            </div>
                            <div class="form-group">
                                <label for="radio" class="col-sm-2 control-label">Radio</label>
                                <div class="col-sm-8">
                                    <div class="radio block"><label><input type="radio"> Unchecked</label></div>
                                    <div class="radio block"><label><input type="radio" checked=""> Checked</label>
                                    </div>
                                    <div class="radio block"><label><input type="radio" disabled=""> Disabled Unchecked</label>
                                    </div>
                                    <div class="radio block"><label><input type="radio" disabled="" checked=""> Disabled
                                        Checked</label></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="radio" class="col-sm-2 control-label">Radio Inline</label>
                                <div class="col-sm-8">
                                    <div class="radio-inline"><label><input type="radio"> Unchecked</label></div>
                                    <div class="radio-inline"><label><input type="radio" checked=""> Checked</label>
                                    </div>
                                    <div class="radio-inline"><label><input type="radio" disabled=""> Disabled Unchecked</label>
                                    </div>
                                    <div class="radio-inline"><label><input type="radio" disabled="" checked="">
                                        Disabled Checked</label></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="smallinput" class="col-sm-2 control-label label-input-sm">Small
                                    Input</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control1 input-sm" id="smallinput"
                                           placeholder="Small Input">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="mediuminput" class="col-sm-2 control-label">Medium Input</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control1" id="mediuminput"
                                           placeholder="Medium Input">
                                </div>
                            </div>
                            <div class="form-group mb-n">
                                <label for="largeinput" class="col-sm-2 control-label label-input-lg">Large
                                    Input</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control1 input-lg" id="largeinput"
                                           placeholder="Large Input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="bs-example" data-example-id="form-validation-states">
                    <form>
                        <div class="form-group has-success">
                            <label class="control-label" for="inputSuccess1">Input with success</label>
                            <input type="text" class="form-control1" id="inputSuccess1">
                        </div>
                        <div class="form-group has-warning">
                            <label class="control-label" for="inputWarning1">Input with warning</label>
                            <input type="text" class="form-control1" id="inputWarning1">
                        </div>
                        <div class="form-group has-error">
                            <label class="control-label" for="inputError1">Input with error</label>
                            <input type="text" class="form-control1" id="inputError1">
                        </div>
                    </form>
                </div>
                <div class="panel-body">
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-2 control-label">Email Address</label>
                            <div class="col-md-8">
                                <div class="input-group">
									<span class="input-group-addon">
										<i class="fa fa-envelope-o"></i>
									</span>
                                    <input type="text" class="form-control1" placeholder="Email Address">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Password</label>
                            <div class="col-md-8">
                                <div class="input-group">
									<span class="input-group-addon">
										<i class="fa fa-key"></i>
									</span>
                                    <input type="password" class="form-control1" id="exampleInputPassword1"
                                           placeholder="Password">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Email Address</label>
                            <div class="col-md-8">
                                <div class="input-group input-icon right">
									<span class="input-group-addon">
										<i class="fa fa-envelope-o"></i>
									</span>
                                    <input id="email" class="form-control1" type="text" placeholder="Email Address">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">With tooltip</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Password</label>
                            <div class="col-md-8">
                                <div class="input-group input-icon right">
									<span class="input-group-addon">
										<i class="fa fa-key"></i>
									</span>
                                    <input type="password" class="form-control1" placeholder="Password">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">With tooltip</p>
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-md-2 control-label">Input Addon Success</label>
                            <div class="col-md-8">
                                <div class="input-group input-icon right">
									<span class="input-group-addon">
										<i class="fa fa-envelope-o"></i>
									</span>
                                    <input id="email" class="form-control1" type="text" placeholder="Email Address">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">Email is valid!</p>
                            </div>
                        </div>
                        <div class="form-group has-error">
                            <label class="col-md-2 control-label">Input Addon Error</label>
                            <div class="col-md-8">
                                <div class="input-group input-icon right">
									<span class="input-group-addon">
										<i class="fa fa-key"></i>
									</span>
                                    <input type="password" class="form-control1" placeholder="Password">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">Error!</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Checkbox Addon</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <div class="input-group-addon"><input type="checkbox"></div>
                                    <input type="text" class="form-control1">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Checkbox Addon</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <input type="text" class="form-control1">
                                    <div class="input-group-addon"><input type="checkbox"></div>

                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">Checkbox on right</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Radio Addon</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <div class="input-group-addon"><input type="radio"></div>
                                    <input type="text" class="form-control1">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Radio Addon</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <input type="text" class="form-control1">
                                    <div class="input-group-addon"><input type="radio"></div>

                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">Radio on right</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Input Processing</label>
                            <div class="col-md-8">
                                <div class="input-icon right spinner">
                                    <i class="fa fa-fw fa-spin fa-spinner"></i>
                                    <input id="email" class="form-control1" type="text" placeholder="Processing...">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <p class="help-block">Processing right</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Static Paragraph</label>
                            <div class="col-md-8">
                                <p class="form-control1 m-n">email@example.com</p>
                            </div>
                        </div>
                        <div class="form-group mb-n">
                            <label class="col-md-2 control-label">Readonly</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control1" placeholder="Readonly" readonly="">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="bs-example" data-example-id="form-validation-states-with-icons">
                    <form>
                        <div class="form-group has-success has-feedback">
                            <label class="control-label" for="inputSuccess2">Input with success</label>
                            <input type="text" class="form-control1" id="inputSuccess2"
                                   aria-describedby="inputSuccess2Status">
                            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                            <span id="inputSuccess2Status" class="sr-only">(success)</span>
                        </div>
                        <div class="form-group has-warning has-feedback">
                            <label class="control-label" for="inputWarning2">Input with warning</label>
                            <input type="text" class="form-control1" id="inputWarning2"
                                   aria-describedby="inputWarning2Status">
                            <span class="glyphicon glyphicon-warning-sign form-control-feedback"
                                  aria-hidden="true"></span>
                            <span id="inputWarning2Status" class="sr-only">(warning)</span>
                        </div>
                        <div class="form-group has-error has-feedback">
                            <label class="control-label" for="inputError2">Input with error</label>
                            <input type="text" class="form-control1" id="inputError2"
                                   aria-describedby="inputError2Status">
                            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                            <span id="inputError2Status" class="sr-only">(error)</span>
                        </div>
                        <div class="form-group has-success has-feedback">
                            <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
                            <div class="input-group">
                                <span class="input-group-addon">@</span>
                                <input type="text" class="form-control1" id="inputGroupSuccess1"
                                       aria-describedby="inputGroupSuccess1Status">
                            </div>
                            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                            <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <input type="file" id="exampleInputFile">
                            <p class="help-block">Example block-level help text here.</p>
                        </div>
                        <div class="panel-footer">
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <button class="btn-success btn">Submit</button>
                                    <button class="btn-default btn">Cancel</button>
                                    <button class="btn-inverse btn">Reset</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="copy_layout">
                <p>Copyright © 2015 Modern. All Rights Reserved | Design by <a href="http://www.mycodes.net/"
                                                                               target="_blank">源码之家</a></p>
            </div>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Nav CSS -->
<link href="../css/custom.css" rel="stylesheet">
<!-- Metis Menu Plugin JavaScript -->
<script src="../js/metisMenu.min.js"></script>
<script src="../js/custom.js"></script>
</body>
</html>
